<template>
  <el-dialog :visible.sync="visible" :title="isEdit ? '编辑成员' : '新增成员'" width="600px" @close="$emit('close')">
    <el-form :model="form" :rules="rules" ref="form" label-width="80px">
      <el-row :gutter="16">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <el-select v-model="form.gender" placeholder="请选择" style="width:100%">
              <el-option label="男" value="M" />
              <el-option label="女" value="F" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="世代" prop="generation">
            <el-input-number v-model="form.generation" :min="1" style="width:100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="分支" prop="branchId">
            <el-select v-model="form.branchId" placeholder="请选择分支" style="width:100%">
              <el-option v-for="branch in branchList" :key="branch.id" :label="branch.name" :value="branch.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="父亲" prop="fatherId">
            <el-select v-model="form.fatherId" filterable clearable placeholder="搜索选择父亲" style="width:100%">
              <el-option v-for="member in allMembers" :key="member.id" :label="member.name" :value="member.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="母亲" prop="motherId">
            <el-select v-model="form.motherId" filterable clearable placeholder="搜索选择母亲" style="width:100%">
              <el-option v-for="member in allMembers" :key="member.id" :label="member.name" :value="member.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="配偶" prop="spouseIds">
            <el-select v-model="form.spouseIds" multiple filterable clearable placeholder="选择配偶" style="width:100%">
              <el-option
                v-for="member in allMembers"
                :key="member.id"
                :label="`${member.name}（${member.gender === 'M' ? '男' : member.gender === 'F' ? '女' : ''}${member.generation ? ', 第' + member.generation + '代' : ''}`"
                :value="member.id"
              >
                <span style="display:flex;align-items:center;">
                  <img v-if="member.photo" :src="member.photo" style="width:24px;height:24px;border-radius:50%;margin-right:6px;" />
                  <span>{{ member.name }}</span>
                  <span style="color:#888;margin-left:6px;">{{ member.gender === 'M' ? '男' : member.gender === 'F' ? '女' : '' }}</span>
                  <span v-if="member.generation" style="color:#aaa;margin-left:6px;">第{{ member.generation }}代</span>
                </span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="排行" prop="childOrder">
            <el-input-number v-model="form.childOrder" :min="1" style="width:100%" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出生日期" prop="birth_date">
            <el-date-picker v-model="form.birth_date" type="date" placeholder="选择日期" style="width:100%"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="去世日期" prop="death_date">
            <el-date-picker v-model="form.death_date" type="date" placeholder="选择日期" style="width:100%"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取消</el-button>
      <el-button type="primary" @click="handleSubmit">保存</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'MemberForm',
  props: {
    visible: Boolean,
    isEdit: Boolean,
    formData: Object,
    allMembers: {
      type: Array,
      default: () => []
    },
    clanList: {
      type: Array,
      default: () => []
    },
    branchList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {
        name: '',
        gender: '',
        generation: 1,
        branchId: '',
        fatherId: null,
        motherId: null,
        spouseIds: [],
        childOrder: 1,
        birth_date: '',
        death_date: ''
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        generation: [{ required: true, message: '请输入世代', trigger: 'blur' }]
      }
    };
  },
  watch: {
    formData: {
      handler(val) {
        if (val) {
          this.form = { ...val };
          if (!Array.isArray(this.form.spouseIds)) this.form.spouseIds = [];
          if (!this.form.childOrder) this.form.childOrder = 1;
        } else {
          this.form = {
            name: '',
            gender: '',
            generation: 1,
            branchId: '',
            fatherId: null,
            motherId: null,
            spouseIds: [],
            childOrder: 1,
            birth_date: '',
            death_date: ''
          };
        }
      },
      immediate: true,
      deep: true
    },
    visible(val) {
      if (!val) this.$refs.form && this.$refs.form.resetFields();
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.$emit('submit', { ...this.form });
        }
      });
    }
  }
};
</script>

<style scoped>
</style> 